<template>
  <view class="container">
    <!-- 优惠券列表 -->
    <view class="coupon-list">
      <view
        v-for="(coupon, index) in couponList"
        :key="index"
        class="coupon-item"
        @click="selectCoupon(coupon)"
      >
        <image class="coupon-image" :src="coupon.image" alt="优惠券图片" />
        <view class="coupon-details">
          <text class="coupon-name">{{ coupon.name }}</text>
          <text class="coupon-validity">
            有效日期: {{ coupon.validityStart }} - {{ coupon.validityEnd }}/
          </text>
        </view>
        <view class="select-button" @click="selectCoupon(coupon)">选择使用</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 假设优惠券列表是通过某种方式从后台获取到的
const couponList = ref([
  {
    image: 'https://example.com/coupon1.jpg',
    name: '满100减30',
    validityEnd: '2025-03-31',
  },
  {
    image: 'https://example.com/coupon2.jpg',
    name: '满200减50',
    validityEnd: '2025-04-05',
  },
  {
    image: 'https://example.com/coupon3.jpg',
    name: '满150减40',
    validityEnd: '2025-04-10',
  },
]);

// 选择优惠券
const selectCoupon = (coupon) => {
  console.log('选择的优惠券:', coupon);

  // 将选中的优惠券数据传递到目标页面
  uni.navigateTo({
    url: `/pages/carwashing/orders/orders?coupon=${encodeURIComponent(JSON.stringify(coupon))}`,
  });
};
</script>

<style scoped>
/* 页面容器 */
.container {
  padding: 20px;
  background-color: #f5f5f5;
}

/* 优惠券列表 */
.coupon-list {
  display: flex;
  flex-direction: column;
}

.coupon-item {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.coupon-image {
  width: 80px;
  height: 80px;
  margin-right: 15px;
  border-radius: 8px;
  object-fit: cover;
}

.coupon-details {
  display: flex;
  flex-direction: column;
}

.coupon-name {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.coupon-validity {
  font-size: 14px;
  color: #888;
  margin-top: 5px;
}

.select-button {
	width: 90px;
  background-color: #ff4d4f;
  color: white;
  border-radius: 5px;
  padding: 5px 5px;
  font-size: 14px;
  border: none;
  cursor: pointer;
  margin-left: auto;
}
</style>
